<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电子礼金系统 SaaS版</title>
  <script src="./static/tailwindcss.js"></script>
  <script src="./static/xlsx.full.min.js"></script>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    .module { display: none; }
    .module.active { display: block; }
    .nav-item { cursor: pointer; padding: 8px 16px; border-radius: 8px; }
    .nav-item.active { background: #dc2626; color: white; }
  </style>
</head>
<body class="bg-gray-100">
  <!-- 导航 -->
  <nav class="bg-white shadow mb-6">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-red-600">电子礼金系统</h1>
      <div class="flex gap-2">
        <div class="nav-item active" onclick="switchModule('h5')">礼金记录</div>
        <div class="nav-item" onclick="switchModule('admin')">管理后台</div>
        <div class="nav-item" onclick="switchModule('screen')">互动大屏</div>
      </div>
    </div>
  </nav>

  <div class="max-w-7xl mx-auto px-4">
    <!-- 模块1: H5礼金记录 -->
    <div id="module-h5" class="module active">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow">
          <h2 class="text-xl font-bold mb-4">礼金录入</h2>
          <form id="gift-form" class="space-y-3">
            <input type="text" id="name" placeholder="姓名" class="w-full p-2 border rounded" required>
            <input type="number" id="amount" placeholder="金额(元)" class="w-full p-2 border rounded" required>
            <select id="payment" class="w-full p-2 border rounded">
              <option value="现金">现金</option>
              <option value="微信">微信</option>
              <option value="支付宝">支付宝</option>
            </select>
            <textarea id="note" placeholder="备注" class="w-full p-2 border rounded" rows="2"></textarea>
            <button type="submit" class="w-full px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">确认录入</button>
          </form>
        </div>
        <div class="lg:col-span-2 bg-white p-6 rounded-lg shadow">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">礼金记录</h2>
            <div class="text-right">
              <div>总金额: <span id="total" class="font-bold text-red-600 text-xl">¥0</span></div>
              <div>总人数: <span id="count">0</span></div>
            </div>
          </div>
          <div id="gift-list" class="max-h-96 overflow-y-auto">
            <p class="text-gray-400 text-center py-8">暂无记录</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 模块2: 管理后台 -->
    <div id="module-admin" class="module">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-gray-600 mb-2">今日订单</h3>
          <p id="today-orders" class="text-3xl font-bold text-red-600">0</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-gray-600 mb-2">本月营收</h3>
          <p id="month-revenue" class="text-3xl font-bold text-green-600">¥0</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-gray-600 mb-2">活跃用户</h3>
          <p id="active-users" class="text-3xl font-bold text-blue-600">0</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-gray-600 mb-2">推广员</h3>
          <p id="promoters" class="text-3xl font-bold text-purple-600">0</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">礼金管理</h3>
          <button onclick="showAllGifts()" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">查看记录</button>
          <button onclick="exportExcel()" class="w-full px-4 py-2 bg-gray-200 rounded">导出Excel</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">打印服务</h3>
          <button onclick="alert('打印订单功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">打印订单</button>
          <button onclick="alert('模板管理功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded">礼簿模板</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">大屏功能</h3>
          <button onclick="alert('套餐管理功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">套餐管理</button>
          <button onclick="alert('用户订购功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded">用户订购</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">设备租赁</h3>
          <button onclick="alert('设备管理功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">设备库存</button>
          <button onclick="alert('租赁功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded">租赁订单</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">推广佣金</h3>
          <button onclick="alert('推广员功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">推广员管理</button>
          <button onclick="alert('佣金功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded">佣金结算</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">系统设置</h3>
          <button onclick="alert('系统设置功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded mb-2">系统配置</button>
          <button onclick="alert('财务功能开发中')" class="w-full px-4 py-2 bg-gray-200 rounded">财务对账</button>
        </div>
      </div>
    </div>

    <!-- 模块3: 互动大屏 -->
    <div id="module-screen" class="module">
      <div class="bg-white p-6 rounded-lg shadow mb-4">
        <h2 class="text-2xl font-bold mb-4">活动: 婚宴典礼</h2>
        <div class="grid grid-cols-3 gap-4">
          <div class="bg-red-50 p-4 rounded text-center">
            <div class="text-gray-600">已收总额</div>
            <div id="screen-total" class="text-3xl font-bold text-red-600">¥0</div>
          </div>
          <div class="bg-blue-50 p-4 rounded text-center">
            <div class="text-gray-600">参与人数</div>
            <div id="screen-count" class="text-3xl font-bold text-blue-600">0</div>
          </div>
          <div class="bg-green-50 p-4 rounded text-center">
            <div class="text-gray-600">今日新增</div>
            <div id="screen-today" class="text-3xl font-bold text-green-600">0</div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">礼金排行榜 TOP 10</h3>
          <div id="ranking"></div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">祝福墙</h3>
          <div id="blessings" class="h-64 overflow-y-auto space-y-2 mb-3"></div>
          <input type="text" id="blessing-input" placeholder="输入祝福..." class="w-full p-2 border rounded">
          <button onclick="sendBlessing()" class="w-full mt-2 px-4 py-2 bg-red-600 text-white rounded">发送</button>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">互动抽奖</h3>
          <button onclick="startLottery()" class="w-full mb-3 px-4 py-2 bg-red-600 text-white rounded">开始抽奖</button>
          <div id="lottery-result" class="text-center text-2xl font-bold text-red-600 py-8">等待抽奖...</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-bold mb-3">签到打卡</h3>
          <div id="checkin" class="space-y-2 max-h-64 overflow-y-auto"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 模态框 -->
  <div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 max-w-2xl w-full m-4">
      <div class="flex justify-between items-center mb-4">
        <h3 id="modal-title" class="text-xl font-bold"></h3>
        <button onclick="closeModal()" class="text-2xl">✕</button>
      </div>
      <div id="modal-content" class="max-h-96 overflow-auto"></div>
    </div>
  </div>

  <script>
    let gifts = [];

    // 模块切换
    function switchModule(name) {
      document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.module').forEach(el => el.classList.remove('active'));
      event.target.classList.add('active');
      document.getElementById(`module-${name}`).classList.add('active');
      if (name === 'screen') updateScreen();
    }

    // 提交表单
    document.getElementById('gift-form').onsubmit = function(e) {
      e.preventDefault();
      const gift = {
        id: Date.now(),
        name: document.getElementById('name').value,
        amount: parseFloat(document.getElementById('amount').value),
        payment: document.getElementById('payment').value,
        note: document.getElementById('note').value,
        time: new Date().toLocaleString()
      };
      gifts.push(gift);
      saveToLocal();
      renderGifts();
      updateDashboard();
      this.reset();
      alert('录入成功！');
    };

    // 渲染列表
    function renderGifts() {
      const list = document.getElementById('gift-list');
      if (gifts.length === 0) {
        list.innerHTML = '<p class="text-gray-400 text-center py-8">暂无记录</p>';
        return;
      }
      list.innerHTML = '<table class="w-full border-collapse"><thead><tr class="bg-gray-100"><th class="border p-2">时间</th><th class="border p-2">姓名</th><th class="border p-2">金额</th><th class="border p-2">方式</th><th class="border p-2">备注</th></tr></thead><tbody>' +
        gifts.slice().reverse().map(g => `<tr><td class="border p-2 text-sm">${g.time}</td><td class="border p-2">${g.name}</td><td class="border p-2 font-bold">¥${g.amount.toFixed(2)}</td><td class="border p-2">${g.payment}</td><td class="border p-2">${g.note || '-'}</td></tr>`).join('') + '</tbody></table>';
    }

    // 更新仪表盘
    function updateDashboard() {
      const total = gifts.reduce((sum, g) => sum + g.amount, 0);
      document.getElementById('total').textContent = '¥' + total.toFixed(2);
      document.getElementById('count').textContent = gifts.length;
      
      const today = new Date().toDateString();
      const todayGifts = gifts.filter(g => new Date(g.time).toDateString() === today);
      document.getElementById('today-orders').textContent = todayGifts.length;
      document.getElementById('month-revenue').textContent = '¥' + total.toFixed(2);
      document.getElementById('active-users').textContent = new Set(gifts.map(g => g.name)).size;
    }

    // 更新大屏
    function updateScreen() {
      const total = gifts.reduce((sum, g) => sum + g.amount, 0);
      const today = new Date().toDateString();
      const todayGifts = gifts.filter(g => new Date(g.time).toDateString() === today);
      
      document.getElementById('screen-total').textContent = '¥' + total.toFixed(2);
      document.getElementById('screen-count').textContent = gifts.length;
      document.getElementById('screen-today').textContent = todayGifts.length;
      
      // 排行榜
      const sorted = gifts.slice().sort((a, b) => b.amount - a.amount).slice(0, 10);
      document.getElementById('ranking').innerHTML = sorted.map((g, i) => 
        `<div class="flex items-center p-2 ${i < 3 ? 'bg-yellow-100' : 'bg-gray-50'} rounded mb-2">
          <span class="w-8 h-8 ${i < 3 ? 'bg-yellow-500' : 'bg-gray-400'} text-white rounded-full flex items-center justify-center mr-3">${i + 1}</span>
          <span class="flex-1">${g.name}</span>
          <span class="font-bold text-red-600">¥${g.amount.toFixed(2)}</span>
        </div>`
      ).join('');
    }

    // 发送祝福
    function sendBlessing() {
      const input = document.getElementById('blessing-input');
      if (!input.value.trim()) return;
      const name = prompt('请输入您的姓名：') || '匿名';
      const div = document.createElement('div');
      div.className = 'p-3 bg-red-50 rounded border-l-4 border-red-500';
      div.innerHTML = `<div class="flex justify-between"><span class="font-bold">${name}</span><span class="text-gray-500 text-sm">${new Date().toLocaleTimeString()}</span></div><div class="text-gray-700">${input.value}</div>`;
      document.getElementById('blessings').prepend(div);
      input.value = '';
    }

    // 抽奖
    function startLottery() {
      if (gifts.length === 0) return alert('暂无参与者');
      const names = Array.from(new Set(gifts.map(g => g.name)));
      const random = names[Math.floor(Math.random() * names.length)];
      document.getElementById('lottery-result').textContent = `恭喜 ${random} 中奖！`;
    }

    // 管理员功能
    function showAllGifts() {
      openModal('所有礼金记录', '<table class="w-full border-collapse"><thead><tr class="bg-gray-100"><th class="border p-2">ID</th><th class="border p-2">姓名</th><th class="border p-2">金额</th><th class="border p-2">时间</th><th class="border p-2">备注</th></tr></thead><tbody>' +
        gifts.map(g => `<tr><td class="border p-2">${g.id}</td><td class="border p-2">${g.name}</td><td class="border p-2">¥${g.amount.toFixed(2)}</td><td class="border p-2">${g.time}</td><td class="border p-2">${g.note || '-'}</td></tr>`).join('') + '</tbody></table>');
    }

    function exportExcel() {
      if (!gifts.length) return alert('暂无数据');
      const ws = XLSX.utils.json_to_sheet(gifts);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '礼金记录');
      XLSX.writeFile(wb, `礼金记录_${new Date().toLocaleDateString()}.xlsx`);
    }

    function openModal(title, content) {
      document.getElementById('modal-title').textContent = title;
      document.getElementById('modal-content').innerHTML = content;
      document.getElementById('modal').classList.remove('hidden');
    }

    function closeModal() {
      document.getElementById('modal').classList.add('hidden');
    }

    // 本地存储
    function saveToLocal() {
      localStorage.setItem('gifts', JSON.stringify(gifts));
    }

    function loadFromLocal() {
      const data = localStorage.getItem('gifts');
      if (data) gifts = JSON.parse(data);
      renderGifts();
      updateDashboard();
    }

    // 初始化
    loadFromLocal();
  </script>
</body>
</html>

